<template>
  <div class="jia_box">
    <JiaSon v-for="item in arr" :key="item.id" :item="item" />
  </div>
</template>

<script>
import JiaSon from "./public-coms/JiaSon";
export default {
  name: "Jia",
  components: { JiaSon },
  data() {
    return {
      arr: [
        {
          id: "01",
          bgcolor: "rgb(35, 147, 78)",
          cellList: [
            {
              id: "001",
              xiao: "x",
              src: "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/5a56b920bc83820736d2260c58858bf4.jpg?f=webp",
            },
          ],
        },
        {
          id: "02",
          bgcolor: "rgb(225, 65, 57)",
          cellList: [
            {
              id: "002",
              src: "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/206eeb5a11b27d97cec3f2b2c053a083.jpg?f=webp",
            },
          ],
          list: [
            {
              id: "121",
              src: "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/8b847dba485b395c897363804f5e0b6a.jpg?thumb=1&w=221&h=221",
              name: "十字门冰箱 486L",
              brief: "风冷无霜，长久保鲜",
              nowPrice: 2799,
              oldPrice: 3499,
            },
            {
              id: "122",
              src: "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/23767bde3bed426b075aecc907c61936.JPG?thumb=1&w=221&h=221",
              name: "冰箱540L",
              brief: "重磅新品福利特惠",
              nowPrice: 2699,
              oldPrice: 3699,
            },
            {
              id: "123",
              src: "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/ace8e2c830bd0def0f6d2cf4efa665cc.jpg?thumb=1&w=221&h=221",
              name: "三门冰箱215L",
              brief: "三温区高效保鲜",
              nowPrice: 1299,
              oldPrice: 1499,
            },
          ],
        },
        {
          id: "03",
          bgcolor: "rgb(225, 65, 57)",
          cellList: [
            {
              id: "003",
              src: "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/ad2af04e55330b35b6ccb50ce4128573.jpg?f=webp",
            },
          ],
          list: [
            {
              id: "131",
              src: "https://i8.mifile.cn/v1/a1/3bf41b04-1924-d627-ea2e-22e1d42bc2c0.webp",
              name: "波轮洗衣机1A",
              brief: "一键操作，父母都爱用",
              nowPrice: 799,
              oldPrice: 899,
            },
            {
              id: "132",
              src: "https://i8.mifile.cn/v1/a1/24bf795a-5518-545b-ead0-9db61c5e492b.webp",
              name: "洗烘一体机1S",
              brief: "国标最高A+级洗净能力",
              nowPrice: 1899,
              oldPrice: 2499,
            },
            {
              id: "133",
              src: "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/552e42b8706ee8d0bd3e048d2a5c4316.jpg?thumb=1&w=221&h=221",
              name: "洗烘一体机Pro",
              brief: "洗烘一体机Pro",
              nowPrice: 2799,
              oldPrice: 3299,
            },
            {
              id: "134",
              src: "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/e08bbc47384f7cfcafe0e5aee71ec257.jpg?thumb=1&w=221&h=221",
              name: "滚筒洗衣机1C 10kg",
              brief: "10kg大容量，专业羽绒洗",
              nowPrice: 1499,
              oldPrice:1699,
            },
            {
              id: "135",
              src: "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/8b847dba485b395c897363804f5e0b6a.jpg?thumb=1&w=221&h=221",
              name: "十字门冰箱 486L",
              brief: "风冷无霜，长久保鲜",
              nowPrice: 2799,
              oldPrice: 3499,
            },
            {
              id: "136",
              src: "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/8b847dba485b395c897363804f5e0b6a.jpg?thumb=1&w=221&h=221",
              name: "十字门冰箱 486L",
              brief: "风冷无霜，长久保鲜",
              nowPrice: 2799,
              oldPrice: 3499,
            },
          ],
        },
        {
          id: "04",
          bgcolor: "rgb(225, 65, 57)",
          end: 'end',
          cellList: [
            {
              id: "004",
              src: "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/5ba8bdf58eee181e2fe21f4ce2788a0a.jpg?f=webp",
            },
            {
              id: "005",
              src: "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/e47ab94753758ce86f7e2cc9ef205d8a.jpg?f=webp",
            },
            {
              id: "006",
              src: "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/050dbb577b3ef8f1b8d8675e72a7e167.jpg?f=webp",
            },
          ],
          list: [
            {
              id: "141",
              src: "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/8b847dba485b395c897363804f5e0b6a.jpg?thumb=1&w=221&h=221",
              name: "十字门冰箱 486L",
              brief: "风冷无霜，长久保鲜",
              nowPrice: 2799,
              oldPrice: 3499,
            },
            {
              id: "142",
              src: "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/8b847dba485b395c897363804f5e0b6a.jpg?thumb=1&w=221&h=221",
              name: "十字门冰箱 486L",
              brief: "风冷无霜，长久保鲜",
              nowPrice: 2799,
              oldPrice: 3499,
            },
            {
              id: "143",
              src: "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/8b847dba485b395c897363804f5e0b6a.jpg?thumb=1&w=221&h=221",
              name: "十字门冰箱 486L",
              brief: "风冷无霜，长久保鲜",
              nowPrice: 2799,
              oldPrice: 3499,
            },
            {
              id: "144",
              src: "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/8b847dba485b395c897363804f5e0b6a.jpg?thumb=1&w=221&h=221",
              name: "十字门冰箱 486L",
              brief: "风冷无霜，长久保鲜",
              nowPrice: 2799,
              oldPrice: 3499,
            },
            {
              id: "145",
              src: "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/8b847dba485b395c897363804f5e0b6a.jpg?thumb=1&w=221&h=221",
              name: "十字门冰箱 486L",
              brief: "风冷无霜，长久保鲜",
              nowPrice: 2799,
              oldPrice: 3499,
            },
            {
              id: "146",
              src: "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/8b847dba485b395c897363804f5e0b6a.jpg?thumb=1&w=221&h=221",
              name: "十字门冰箱 486L",
              brief: "风冷无霜，长久保鲜",
              nowPrice: 2799,
              oldPrice: 3499,
            },
            {
              id: "147",
              src: "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/8b847dba485b395c897363804f5e0b6a.jpg?thumb=1&w=221&h=221",
              name: "十字门冰箱 486L",
              brief: "风冷无霜，长久保鲜",
              nowPrice: 2799,
              oldPrice: 3499,
            },
            {
              id: "148",
              src: "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/8b847dba485b395c897363804f5e0b6a.jpg?thumb=1&w=221&h=221",
              name: "十字门冰箱 486L",
              brief: "风冷无霜，长久保鲜",
              nowPrice: 2799,
              oldPrice: 3499,
            },
            {
              id: "149",
              src: "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/8b847dba485b395c897363804f5e0b6a.jpg?thumb=1&w=221&h=221",
              name: "十字门冰箱 486L",
              brief: "风冷无霜，长久保鲜",
              nowPrice: 2799,
              oldPrice: 3499,
            },
            {
              id: "150",
              src: "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/8b847dba485b395c897363804f5e0b6a.jpg?thumb=1&w=221&h=221",
              name: "十字门冰箱 486L",
              brief: "风冷无霜，长久保鲜",
              nowPrice: 2799,
              oldPrice: 3499,
            },
            {
              id: "151",
              src: "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/8b847dba485b395c897363804f5e0b6a.jpg?thumb=1&w=221&h=221",
              name: "十字门冰箱 486L",
              brief: "风冷无霜，长久保鲜",
              nowPrice: 2799,
              oldPrice: 3499,
            },
            {
              id: "152",
              src: "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/8b847dba485b395c897363804f5e0b6a.jpg?thumb=1&w=221&h=221",
              name: "十字门冰箱 486L",
              brief: "风冷无霜，长久保鲜",
              nowPrice: 2799,
              oldPrice: 3499,
            },
          ],
        }
      ],
    };
  },
};
</script>

<style lang="less" scoped>
.jia_box {
  width: 7.2rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}
</style>